<template>
  <div>

    <!-- 面包屑 -->
    <div class="home-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >知识图库</el-breadcrumb-item>
        <el-breadcrumb-item >专家知识库概览</el-breadcrumb-item>
        <el-breadcrumb-item >
          <router-link to="/konwledgeGraph/proProcess">生产工艺</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item >工艺详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="details-container clearfix">
      <div class="details-header">
        <div class="details-header-title">
          <span>{{this.kMaintainVO.kname}}</span>
          <span class="buttons">

            <router-link :to="'/konwledgeGraph/productprocess/producteditor/'+this.proprocessId" type="a">
              <el-button
                class="edition"
                type="primary"
                size="small"
                icon="el-icon-edit"
              >编辑</el-button>
            </router-link>

            <el-button
              @click="deleteDialogVisible = true"
              class="delete"
              type="primary"
              size="small"
              icon="el-icon-delete"
            >删除</el-button>
          </span>
        </div>
        <div class="details-header-tags">
          <span v-for="item in this.attributeVOList" :key="item">{{item}}</span>
        </div>
      </div>

      <div class="details-main" v-loading="loading">
       <div class="img-container-left">
          <div class="details-main-content" v-html="this.kMaintainVO.ktext"></div>
        </div>

        <div class="img-container-right">
          <div style="border: 1px solid #909399;border-radius: 5px;">
            <span style="margin-bottom: 5px;display: inline-block;">关系图(滚动缩放)</span>
            <prodetil-chart :relationVOList="relationVOList"></prodetil-chart>
          </div>
          <div>
            <span style="margin: 5px 0;display: inline-block;">关系表</span>
            <vxe-table
              border
              show-header-overflow
              show-overflow
              highlight-hover-row
              align="center"
              max-height="300"
              :data="relationVOList">
              <vxe-table-column field="entity1" title="实体一"></vxe-table-column>
              <vxe-table-column field="relation" title="关系"></vxe-table-column>
              <vxe-table-column field="entity2" title="实体二"></vxe-table-column>
            </vxe-table>
          </div>
        </div>
      </div>
    </div>

    <!-- 删除操作 -->
    <el-dialog
      title="删除确认"
      :visible.sync="deleteDialogVisible"
      width="25%"
      >
      <div class="delete-dialog">
        <i class="iconfont delete-iconfont">&#xe6d6;</i>
        <div>
          <p><span style="color: red;font-weight: 600;">删除后不可恢复</span></p></br>
          <p>是否继续?</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="thePeocessDetilDelete">继续删除</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import KMaintainApi from '@/api/kMaintainApi'
  import ProdetilChart from './echarts/productProcessDetilChart'
  import $ from 'jquery'
export default {
  props: ['proprocessId','proprocessName'],
  name: "ManufacturingDetails",
  data: function() {
    return {
      loading:false,
      // 知识Vo
      kMaintainVO:{},
      // 关系list
      relationVOList:[],
      // 属性list
      attributeVOList:[],
      pages: [
        {
          title: "",
          content: `微波萃取又称微波辅助提取( Microwave -assisted Extraction，MA E)，是指使用适当的溶剂在微波反应器中从植物 、矿物 、动物组织等中提取各种化学成分的技术和方法 [1] 。微波是指频率在 300 MHz至300 GHz 的电磁波，利用电磁场的作用使固体或半固体物质中的某些有机物成分与基体有效的分离，并能保持分析对象的原本化合物状态。`
        },
        {
          title: "原理:",
          content: `微波萃取的机理可从以下3个方面来分析 [1] [2] [3] ：
        微波辐射过程是高频电磁波穿透萃取介质到达物料内部的微管束和腺胞系统的过程。由于吸收了微波能，细胞内部的温度将迅速上升，从而使细胞内部的压力超过细胞壁膨胀所能承受的能力，结果细胞破裂，其内的有效成分自由流出，并在较低的温度下溶解于萃取介质中。通过进一步的过滤和分离，即可获得所需的萃取物。`
        },
        {
          title: "原理:",
          feature: "",
          content: `微波萃取的机理可从以下3个方面来分析 [1] [2] [3] ：
        微波辐射过程是高频电磁波穿透萃取介质到达物料内部的微管束和腺胞系统的过程。由于吸收了微波能，细胞内部的温度将迅速上升，从而使细胞内部的压力超过细胞壁膨胀所能承受的能力，结果细胞破裂，其内的有效成分自由流出，并在较低的温度下溶解于萃取介质中。通过进一步的过滤和分离，即可获得所需的萃取物。`
        }
      ] ,
      deleteDialogVisible:false,

      // 工艺Id
      // proprocessId:''
    };
  },
  methods: {

    // 获取生产工艺详情
    getProprocessDeil(kid){
      this.loading = true
      KMaintainApi.kMaintainQuery(kid).then(res => {
        if(res.data.status === "200"){
          this.kMaintainVO = res.data.data.kMaintainVO
          this.relationVOList = res.data.data.relationVOList
          // 属性类型分割
          this.attributeVOList =res.data.data.kMaintainVO.ktype.split(",")
          this.loading = false
        }
      })
    },
    confirm() {
      if (confirm("确实要删除吗？")) {
        alert("已经删除！");
      } else {
        alert("已经取消了删除操作");
      }
    },
    thePeocessDetilDelete(){
      KMaintainApi.kmaintainDelete(this.$route.params.proprocessId).then(res => {
        if(res.data.status === "200"){
            this.deleteDialogVisible = false
            this.$router.push({
              path:'/konwledgeGraph/proProcess'
            })
        }
      })
    }
  },
  components:{
    ProdetilChart
  },

  created() {
    var timer = setTimeout(this.getProprocessDeil(this.proprocessId),3000)
  },
  updated() {
    $('.details-main-content').find('img').css({
      // "width": "auto",
      // "height": "auto",
      'max-width': '100%',
      'max-height': '100%'
    });
  }
};
</script>
<style scoped lang="less">
.details-container {
  background: white;
  padding: 20px 0 0 30px;
  min-height: 780px;
  .details-header {
    padding-bottom: 10px;
    border-bottom: 1px solid grey;
    .details-header-title {
      font-size: 34px;
      padding-bottom: 10px;
      span {
        display: inline-block;
        vertical-align: bottom;
      }
      .buttons {
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
        padding-left: 30px;
        .edition {
          color: #409eff;
          background: rgba(236, 245, 255, 1);
        }
        .delete {
          color: #ec808d;
          background-color: rgba(254, 240, 240, 1);
          border-color: rgba(179, 216, 255, 1);
        }
      }
    }
    .details-header-tags {
      display: inline-block;
      flex-wrap: wrap;
      span {
        padding: 0 10px;
        margin-right: 10px;
        color: white;
        border-radius: 10px;
        background: #02a7f0;
      }
    }
  }
  .details-main {
    padding-top: 30px;
    display: flex;
    // justify-content: space-between;
    .img-container-left {
      // float: left;
      flex: 1;
      background-color: #F2F6FC;
      // overflow-x: hidden;
      // -webkit-box-orient: vertical;-webkit-line-clamp:3;
      // word-wrap: hyphenate;
      // padding: 0 30px 30px 0;
      // width: 500px;
    }
    .img-container-right {
      float: right;
      padding: 0 10px 10px 30px;
      width: 400px;
    }
    .details-main-content{
      // width: 100px !important;
      // margin: 0 0 10px 10px;
      // ::v-deep {
      //   img {
      //     width: 100px !important;
      //     max-height: 300px;
      //   }
      // }
    }


  }
}
.delete-dialog{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.delete-iconfont{
  color: red;
  font-size: 40px;
  margin-right: 30px;
}
</style>
